/*
 * 说明
 * 本文件基于vue和elementui,为公共组件js,请勿随意修改本文件
 * 文件中封装了系统中常用的组件,请根据说明文档直接引入标签和配置项即可使用
 * 以下组件基本与业务相关,常用的基础组建请参照elementui
 * 一旦需增加或修改常用组件,必须在说明文档中加入对应描述,代码中也需提供可读性良好的注释
 * 不常用的组件请封装在具体的业务模块
 * 作者:shelly
 */
/***********************************************************************************************
 *@name   : customDialog
 *@desc   : 自定义窗口
 *@author shelly
 ***********************************************************************************************/
var customDialog =
    '<el-dialog class="custom-dialog" ref="customDialog" fullscreen="true" :title="dialog.title" :visible="dialog.visible" :size="dialog.size" :before-close="handleClose" :show-close="dialog.showClose" :modal="dialog.modal" top="5%">' +
    '<div :style="styleObj">' +
    '<slot name="dialogContent"></slot>' +
    '</div>' +
    '<slot name="dialogFooter" ref="dialogFooter"></slot>' +
    '</el-dialog>';

Vue.component('custom-dialog', {
    template: customDialog,
    props: ['options', 'closefn'],
    data: function () {
        return {
            styleObj: {
                overflow: 'scroll'
            }
        }
    },
    computed: {
        dialog: function () {
            var dialog = { // 默认配置项
                title: '操作窗口',
                visible: false,
                fullscreen: true,
                handleClose: this.handleClose,
                showClose: true,
                modal: true
            };
            _.extend(dialog, this.options); // 根据传入的自定义选项 拓展默认配置
            if (dialog.size === 'large') {
                // 为保证大窗口能自适应屏幕 将窗口内容区域的高度首先减去上下各5% 并减去头尾部的120px占高
                this.styleObj.maxHeight = 0.9 * document.body.clientHeight - 120 + 'px';
            }
            return dialog;
        }
    },
    methods: {
        handleClose: function () {
            this.closefn ? this.closefn() : this.options.visible = false;
        }
    }
});
